<script setup lang="ts">
import { onMounted } from 'vue';
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router';

const router = useRouter()
const useStore = useUserStore()

onMounted(() => {
  if (!useStore.userState) {
    return router.push('/login')
  }
})

function setUp(){
  router.push('/setup/setuphome')
}

function message(){
  router.push('/setup/message')
}

function collect(){
  router.push('/mycollect/hospital')
}

function advice(){
  router.push('/myadvice')
}

function help(){
  router.push('/help')
}

function visitor(){
  router.push('/visitormanagement')
}

function seeAll(){
  window.localStorage.setItem('reservation','0')
  router.push('/myres')
}

function seeAllOne(){
  window.localStorage.setItem('reservation','1')
  router.push('/myres')
}

function seeAllTwo(){
  window.localStorage.setItem('reservation','2')
  router.push('/myres')
}

function seeAllOneThr(){
  window.localStorage.setItem('reservation','3')
  router.push('/myres')
}

function seeAllOneFour(){
  window.localStorage.setItem('reservation','4')
  router.push('/myres')
}
</script>

<template>
  <div>
    <!-- 头部 -->
    <header>
      <div>
        <van-icon name="https://fastly.jsdelivr.net/npm/@vant/assets/icon-demo.png" />
        <h6>{{ useStore.username }}</h6>
      </div>
      <div class="pic">
        <van-icon name="setting" @click="setUp"/>
        <van-icon name="service" class="pho" @click="message"/>
      </div>
    </header>

    <!-- 预约宫格 -->
    <van-cell-group inset>
      <p><span>我的预约</span><span class="seeAll" @click="seeAll">查看全部></span></p>
      <van-grid :border='false' style="color:#0379ff">
        <van-grid-item icon="add-square" text="待就诊" @click="seeAllOne"/>
        <van-grid-item icon="checked" text="待评价" @click="seeAllTwo"/>
        <van-grid-item icon="font" text="已评价" @click="seeAllOneThr"/>
        <van-grid-item icon="label" text="历史" @click="seeAllOneFour"/>
      </van-grid>
    </van-cell-group>

    <!-- 就诊列表 -->
    <van-cell-group inset>
      <van-cell title="我的就诊人" title-style="margin-left:15px" @click="visitor">
        <template #icon>
          <van-icon name="friends" style="color:#0379ff;font-size: 20px;"/>
        </template>
      </van-cell>
      <van-cell title="我的咨询" title-style="margin-left:15px" @click="advice">
        <template #icon>
          <van-icon name="chat" style="color:#0379ff;font-size: 20px;"/>
        </template>
      </van-cell>
      <van-cell title="我的收藏" title-style="margin-left:15px" @click="collect">
        <template #icon>
          <van-icon name="like" style="color:#0379ff;font-size: 20px;"/>
        </template>
      </van-cell>
      <van-cell title="帮助中心" title-style="margin-left:15px" @click="help">
        <template #icon>
          <van-icon name="question" style="color:#0379ff;font-size: 20px;"/>
        </template>
      </van-cell>
    </van-cell-group>
  </div>
</template>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
}

header {
  padding-left: 20px;
  padding-right: 20px;
  line-height: 150px;
  font-size: 40px;
  height: 120px;
  background-color: #0379ff;
  display: flex;
  justify-content: space-between;

  div {
    display: flex;
    justify-content: space-between;
    align-items: center;

    h6 {
      font-size: 20px;
    }
  }
}

.pic {
  font-size: 20px;
  width: 50px;
}

.van-cell-group>p {
  display: flex;
  justify-content: space-between;

  .seeAll {
    font-size: 12px;
    color: gray;
  }

  span {
    font-size: 14px;
    font-weight: 700;
    margin-left: 10px;
    margin-right: 10px;
    margin-top: 5px;
  }
}

.van-cell-group {
  margin-bottom: 40px;
  width: 350px;
  margin: 30px auto;
}

.van-cell{
  height: 40px;
  line-height: 40px; 
  display: flex;
  align-items: center;
  font-size: 16px;
}
</style>
